<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
	<style>
		canvas { width: 100% !important; height: 100% !important}
        body{padding: 0px; margin: 0px; }
        .overcanvas {
				position: absolute;
				top: 0px;
				width: 150px;
				padding: 5px;
				font-family: Monospace;
				font-size: 13px;
				text-align: left;
				font-weight: bold;
        }
        .footer {
              position: absolute;
              bottom:0px;
              padding: 5px;
              font-family: Monospace;
              font-size: 13px;
              text-align: left;
              font-weight: bold;
        }
        .myButton {
            background-color:transparent;
            border:2px solid #040404;
            display:inline-block;
            cursor:pointer;
            color:#040404;
            font-family:Arial;
            font-size:13px;
            font-weight:700;
            padding:10px 10px;
            text-decoration:none;
            width: 120px;
        }
        .myButton:hover {
            background-color:transparent;
            color: #722040;
            border:2px solid #722040;
        }
        .myButton:active {
            position:relative;
            top:1px;
        }
        a{
            color:black;
            padding-left: 10px;
            display:block;
            height: 5px;
        }    
   
	</style>
    <link rel="stylesheet" type="text/css" href="css/component.css" />
	<script src="libs/three.js"></script>
	<script src="libs/TrackballControls.js"></script>
	<script src="libs/ThreeSetup.js"></script>
    <script src="libs/d3.min.js"></script>  
    <script src="libs/hemesh.js"></script>
    <script src="libs/subd.js"></script>
	</head>
	<body>
        <div class="overcanvas"><br>
        <label><input type="checkbox" id="checkRender" >PhongShader</label><br/><br/>  
        <label><input type="checkbox" id="checkCM" checked>ControlMesh</label><br/><br/> 
        <label><input type="checkbox" id="checkWireframe" checked>Wireframe</label><br/><br/>     
        <input type="file" id="fileToLoad" class="inputfile inputfile-2" >
        <label for="fileToLoad"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Import OBJ&hellip;</span></label><br/><br/>
        <button id="exportButton" class="myButton">Export OBJ</button><br/><br/>
        <button id="diButton" class="myButton">Subdivide</button><br/><br/>
        <button id="oriButton" class="myButton">Original Mesh</button><br/><br/>   
        <b>Models: </b><br/> <br/> 
		<a href="javascript:loadServerModel('models/torus.obj');">torus</a> <br/>
		<a href="javascript:loadServerModel('models/sphere.obj');">sphere</a> <br/>
		<a href="javascript:loadServerModel('models/cylinder.obj');">cylinder</a> <br/>
		<a href="javascript:loadServerModel('models/circle.obj');">circle</a> <br/>
		<a href="javascript:loadServerModel('models/head.obj');">head</a> <br/>
		<a href="javascript:loadServerModel('models/bigguy_0.obj');">bigguy</a><br/> 
		<a href="javascript:loadServerModel('models/monsterfrog_cage0.obj');">monsterfrog</a> <br/>
		<a href="javascript:loadServerModel('models/mudbox_reptile.obj');">reptile</a> <br/><br/><br/>  
        <label id="infomesh" ></label><br/>    
        </div>
        <div class="footer">
            <label id="information" ></label><br/>
        </div>
	<script>
   
        var setup = new ThreeSetup();
        var directionalLightUpper = new THREE.DirectionalLight( 0xffffff, 0.5 );
        var directionalLightDown = new THREE.DirectionalLight( 0xffffff, 0.5 );
        directionalLightUpper.position.set( 0, 0, -10).normalize();;
        directionalLightDown.position.set( 0, 10, 10).normalize();;
        //This light's color gets applied to all the objects in the scene globally.
        var light = new THREE.AmbientLight( 0x404040,0.5 ); // soft white light 
        //light.position.set(10,10,10);
        var lighth = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
        var phongmaterial=new THREE.MeshPhongMaterial( { 
            color: 0x086A87,
            specular: 0xffffff,
            side:  THREE.DoubleSide,   
            shininess: 100,
            emissive: 0x000000,
            //shading:THREE.FlatShading,
            polygonOffset: true,
            polygonOffsetFactor: 1,
            polygonOffsetUnits: 0.1
        } );
        var meshmaterial= new THREE.MeshBasicMaterial({
            color:  0xd9d9d9,
            polygonOffset: true,
            polygonOffsetFactor: 1,
            side:  THREE.DoubleSide, 
            vertexColors: THREE.FaceColors,
            polygonOffsetUnits: 0.1,
            opacity: 1
        })
        var controlMeshMaterial= new THREE.LineBasicMaterial({
            color: 0xff2222,
            opacity: 1,
            transparent: true,
        });
        
        var infovf=document.getElementById("infomesh");
        var info=document.getElementById("information");
        var hemesh=new Hemesh();
        var hewireframe=new Hemesh();
        var subd={};
        var subdMesh={};
		var controlMesh={};
        var controlMeshObject={};
        setup.scene.add(directionalLightDown);
        setup.scene.add(directionalLightUpper);
        setup.scene.add(light);
        setup.scene.add( lighth );
        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            setup.resize();
        }

        function render() {
                requestAnimationFrame(render);
                setup.render();
         
        }
        function cancelAnimation(){
            cancelRender=true;
        }
        render();
	</script>
    <script src="libs/utils.js"></script>  
    <script src="libs/ButtonsEvents.js"></script>      
</body></html>
